﻿<!DOCTYPE html>
<html lang="en"   ng-app = "myApp" ng-controller="myCtrl"  ng-init="loaddata()">
	<head>
		<meta charset="utf-8" />
		<title>Contacts</title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="shortcut icon" type="image/png" href="img/tubiao.png">
		<!---<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">--->
		<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
		<link rel="stylesheet" href="css/font-awesome.css" type="text/css" />
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		<!--[if IE]>
		<script src="js/html5.js"></script>
		<![endif]-->
	</head>
	<body >

		<!--<div id="page-preloader"><span class="spinner"></span></div>-->
		<!--<header id="header" class="clear">-->
			<!--<a href="index.html" class="logo">Matsumari</a>-->
			<!--<div class="header-right">-->
				<!--<div class="header-search">-->
					<!--<i class="fa fa-search" aria-hidden="true"></i>-->
				<!--</div>-->
			<!--</div>-->
			<!--<nav class="navbar">-->
				<!--<div class="navbar-header">-->
					<!--<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">-->
					<!--<span class="sr-only">Toggle navigation</span>-->
					<!--<span class="icon-bar"></span>-->
					<!--<span class="icon-bar"></span>-->
					<!--<span class="icon-bar"></span>-->
					<!--</button>-->
				<!--</div>-->
				<!--<div id="navbar" class="navbar-collapse collapse">-->
					<!--<ul class="nav navbar-nav menu">-->
						<!--<li class="dropdown"><a href="index.html">Home</a></li>-->
						<!--<li><a href="blog.html">Blog</a></li>-->
						<!--<li><a href="gallery.html">Gallery</a></li>-->
						<!--<li><a href="about_us.html">About Us</a></li>-->
						<!--<li><a href="contacts.html">Contacts</a></li>-->
					<!--</ul>-->
				<!--</div>-->
			<!--</nav>-->
		<!--</header>-->
		<!--&lt;!&ndash; header &ndash;&gt;-->
		<!--<div class="breadcrumbs-wrapper">-->
			<!--<ul class="breadcrumbs">-->
				<!--<li><a href="index.html" class="home"><i class="fa fa-home" aria-hidden="true"></i></a></li>-->
				<!--<li><a>Contacts</a></li>-->
			<!--</ul>-->
		<!--</div>-->
		<!-- breadcrumbs-wrapper -->
		<!--<section class="content-wrapper">-->
			<!--<div class="container">-->
			<!--</div>-->
		<!--</section>-->
				<!--<div class="title">-->
					<!--<h1>Contacts</h1>-->
				<!--</div>-->
				<!--<div class="row">-->
					<!--<div class="col-md-8">-->
						<!--<div class="clear">-->
							<!--<div class="contact-block pic1">-->
								<!--<h5>Meet Us</h5>-->
								<!--<p>Jesper street, Uzbekistan 29 A 33 Avenue</p>-->
							<!--</div>-->
							<!--<div class="contact-block pic2">-->
								<!--<h5>Phone</h5>-->
								<!--<p>8 (800) 222-22-22 <br> 8 (800) 222-22-33</p>-->
							<!--</div>-->
							<!--<div class="contact-block pic3">-->
								<!--<h5>E-mail</h5>-->
								<!--<p>minikeevdesign@gmail.com</p>-->
							<!--</div>-->
							<!--<div class="contact-block pic4">-->
								<!--<h5>Site</h5>-->
								<!--<p><a href="http://namewebsite.com">http://namewebsite.com</a></p>-->
							<!--</div>-->
						<!--</div>-->
						<!--<p><i>Mauris ornare elit sem, eget tempor libero vestibulum id. Curabitur ultrices lacinia convallis. Praesent ac quam at est accumsan aliquam. Cras odio turpis, scelerisque vestibulum maximus eget, suscipit eu nulla. Nullam sodales, tortor eu egestas pharetra, metus sem fermentum lorem, a vestibulum lectus erat eget lorem. Morbi ullamcorper tincidunt lorem sed lacinia. Cras vel pulvinar mauris. Phasellus eget suscipit ex, sed consequat velit. Praesent nec lobortis enim, eget feugiat quam. Praesent quis sollicitudin sem. Proin a elementum urna, vel venenatis quam. Etiam augue turpis, gravida a fringilla id, viverra in lectus. In luctus ipsum vel nunc pharetra, sit amet dictum sapien elementum. Aliquam eu ornare turpis.</i></p>-->
					<!--</div>-->
				<div  style="margin: 5px;">
					<div  style="width: 100%;height:auto;" class="contact-area">
						<div onclick="javascript:document.getElementById('srollView').scrollIntoView();" style="border-bottom: 0px solid red; margin-bottom: 0px;height: auto; overflow:auto;width:100%;background-color: #fff;">
							<ul id="ulhtml" style=""></ul>
						</div>
						<!--<div class="input-block">-->
							<!--<textarea  style="width: 100%;height: 300px;" readonly="true"></textarea>-->
						<!--</div>-->
						<h4 id="srollView">15815006577 chat to 0</h4>
						<div class="input-block message-form">
							<textarea ng-model="mess" placeholder="Message"></textarea>
						</div>
						<input type="submit" ng-click="sendmsg()" value="Send Message">
					</div>
				</div>
				<!--</div>-->
				<!--<div class="map"></div>-->




		<!-- content-wrapper -->
		<!--<footer id="footer">-->
			<!--<div class="container">-->
				<!--<div class="row">-->
					<!--<div class="col-md-4">-->
						<!--<a href="index.html" class="logo">Matsumari</a>-->
						<!--<p>Etiam dictum purus et leo laoreet, vel congue diam pulvinar. Suspendisse elementum dictum lacus id ultricies. In hac habitasse platea dictumst</p>-->
						<!--<div class="copy">Copyright &copy; 2017.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></div>-->
					<!--</div>-->
					<!--<div class="col-md-3">-->
						<!--<h6>Latest news</h6>-->
						<!--<div class="news-footer">-->
							<!--<a href="blog_inner.html">Praesent ullamcorper sodales</a>-->
							<!--<div class="date">14.11.2016</div>-->
						<!--</div>-->
						<!--<div class="news-footer">-->
							<!--<a href="blog_inner.html">Fusce sollicitudin felis vel</a>-->
							<!--<div class="date">14.11.2016</div>-->
						<!--</div>-->
						<!--<div class="news-footer">-->
							<!--<a href="blog_inner.html">Phasellus vitae dictum urna</a>-->
							<!--<div class="date">14.11.2016</div>-->
						<!--</div>-->
					<!--</div>-->
					<!--<div class="col-md-2">-->
						<!--<h6>Best Posts</h6>-->
						<!--<ul class="footer-menu">-->
							<!--<li><a href="about_us.html">About us</a></li>-->
							<!--<li><a href="">Sitemap</a></li>-->
							<!--<li><a href="contacts.html">Contacts</a></li>-->
							<!--<li><a href="blog.html">Blog</a></li>-->
							<!--<li><a href="gallery.html">Gallery</a></li>-->
						<!--</ul>-->
					<!--</div>-->
					<!--<div class="col-md-3">-->
						<!--<h6>Contacts</h6>-->
						<!--<address>Duis volutpat et magna quis congue. Nullam non velit porta, vulputate odio tempus, volutpat nibh. Mauris dictum dolor non interdum auctor</address>-->
						<!--<div class="footer-phone"><i class="fa fa-phone" aria-hidden="true"></i> +1 (123) 456 78 90</div>-->
					<!--</div>-->
				<!--</div>-->
				<!--<ul class="social">-->
					<!--<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>-->
					<!--<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>-->
					<!--<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>-->
					<!--<li><a href="#"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li>-->
				<!--</ul>-->
			<!--</div>-->
		<!--</footer>-->
		<!-- footer -->
		<!-- scripts -->

		<div style="z-index:100;border: 0px solid #ccc;width:40px;height: 40px; position:fixed; bottom: 500px;right: 20px;"><img  ng-click="returnback()" width="40px" height="40px"  src="img/return.png"/></div>
		<script src="js/lib/jquery-1.10.1.min.js"></script>
		<script src="js/angular/jquery.blockUI.js"></script>
		<script src="js/lib/angular.min.js"></script>

		<script src="js/lib/jquery.js"></script>
		<script src="js/lib/bootstrap.min.js"></script>
		<script src="js/lib/lightbox.min.js"></script>
		<script src="js/lib/shuffle.js"></script>	
		<script src="js/lib/swiper.min.js"></script>
		<script src="js/lib/waypoints.min.js"></script>		
		<script src="js/script.js"></script>

		<script src="js/addressManager.js"></script>

		<script type="text/javascript">


			function gosay(){
                document.getElementById('srollView').scrollIntoView();

			}

            var app = angular.module("myApp",[]);

            app.controller("myCtrl",function($scope,$http,$timeout, $interval) {

                $scope.sendmsg = function () {

//                    alert(0);
                    $http({
                        method:'POST',
                        url:"../../kfk/sendMsg",
                        data: {"content":$scope.mess}
                    }).success( function (data){
                        $scope.mess = "";
//						console.log(data.info);
                        if (data.status == "s") {

                        }else{

                        }

                    }).error(function(data, status, headers, config) {});
                }

                //socket通信
                var socket;
                $scope.returnback =function(){
                    //关闭事件
                    socket.close();
                    window.location.href = webAddress + "/returnback";
                }

                $scope.loaddata = function () {

                    //登录时，加载消息
                    if(typeof(WebSocket) == "undefined") {
                        alert("您的浏览器不支持WebSocket");
                        return;
                    }
//                    alert("您的浏览器支持WebSocket");
                    //do something
                    //实现化WebSocket对象，指定要连接的服务器地址与端口
                    socket = new WebSocket(wsAddress+"/websocket");
                    //打开事件
                    socket.onopen = function() {
//                        alert("Socket 已打开");
                        var str = "{senderId:'15815006577',reciverId:'0',isfirst:'y'}";
                        socket.send(str);
                    };
					//获得消息事件
                    var lastCreateTime = "";
					socket.onmessage = function(msg) {
//						socket.send("你好,我是客户端");

                        var msgdata=eval("("+msg.data+")");
                        console.log(msgdata);

                        if (msgdata.info.length != 0){
                            lastCreateTime = msgdata.info[msgdata.info.length-1].createTime;
                            console.log(lastCreateTime);
                        }
						for (var i=0;i<msgdata.info.length;i++){
//							    console.log(msgdata.info[i])
							var li = document.createElement('li'); //1、创建元素
                            var br = document.createElement('br'); //1、创建元素
//                            var span = document.createElement('span'); //1、创建元素
//							span.setAttribute("style","font-color:red");
//                            span.innerHTML = msgdata.info[i].senderId;
							li.innerHTML=" ( "+msgdata.info[i].createTime+" ) "+msgdata.info[i].senderId+" 说："+msgdata.info[i].content;

							document.getElementById('ulhtml').appendChild(li);
                            document.getElementById('ulhtml').appendChild(br);

                            document.getElementById('srollView').scrollIntoView();
//                            var div = document.getElementById("srollView");
//                            div.scrollTop = div.scrollHeight;


						}
						var str = "{senderId:'15815006577',reciverId:'0',createTime:'"+lastCreateTime+"',isfirst:'n'}";
						socket.send(str);

					};
					//关闭事件
					socket.onclose = function() {
//						alert("Socket已关闭");
						console.log("Socket已关闭")
					};
					//发生了错误事件
					socket.onerror = function(msg) {
						alert("发生了错误");
						console.log(msg)
					};
            	}
            })
		</script>
	</body>
</html>
